<!-- 热销商品占比图(饼图) -->

<template>
	<div id="com-container">
		<div class="com-chart" ref="hot_ref">

		</div>
		<span class="iconfont  left" @click="leftPie()" :style="comStyle">&#xe6ef;</span><!-- 左右箭头 -->
		<span class="iconfont  right" @click="rightPie()" :style="comStyle">&#xe6ed;</span>
		<span class="name" :style="comStyle">
			{{title}}
		</span>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				chartInstance: null,
				allData: null, //服务器返回的数据
				currentIndex: 0, //当前所展示出的一级分类标题
				title: null,
				titleFontSize: 0 //控制标题大小

			}

		},
		computed: { //计算属性
			comStyle() {//控制标题大小
				return {
					fontSize: this.titleFontSize + 'px'
				}
			}

		},
		mounted() {
			this.initChart()
			this.getData()
			//屏幕监听事件
			window.addEventListener('resize', this.screenAdapter)
			//在页面加载完成的时候 主动进行屏幕的适配
			this.screenAdapter()

		},
		destroyed() {
			window.removeEventListener('resize', this.screenAdapter)
		},
		methods: {
			//初始化echarInstance对象
			initChart() {
				this.chartInstance = this.$echarts.init(this.$refs.hot_ref, 'chalk') //第二个参数主题的使用
				//对图表初始化配置的控制
				const initOption = {
					title: {
						text: '▎热销商品的占比',
						left: 20,
						top: 20
					},
					series: [{
						type: 'pie',
						label: {
							show: false
						},
						legend: { //配置图例文字标题
							top: '10%',
							icon: 'circle' //图标为圆形

						},
						tooltip: {
							show: true,
							formatter: () => {
								return
							}
						},
						emphasis: {
							label: { //鼠标放到图上显示文字
								show: true
							},
							labelLine: { //不显示线  文字指向
								show: false
							}
						}
					}]
				}
				//可以多次设置setOption  它是相互整合的过程  不会覆盖之前的设置
				this.chartInstance.setOption(initOption)


			},
			// 获取服务器的数据
			async getData() {
				// http://127.0.0.1:8000/api/hot
				const {
					data: ret
				} = await this.$http.get('hotproduct')
				this.allData = ret
				this.updateChart()

			},
			//更新图表
			updateChart() {
				//获取一级标题
				const xTitle = this.allData.map(item => {
					return item.name
				})
				this.title = xTitle[this.currentIndex]
				//获取二级图例数据
				const legenData = this.allData[this.currentIndex].children.map(item => {
					return item.name
				})
				//处理图表需要的数据  获取二级分类下面数据
				const seriesData = this.allData[this.currentIndex].children.map(item => {
					return {
						name: item.name,
						value: item.value
					}
				})
				const dataOption = { //因为前面都配置过 这里只对数据行配置 、oop
					series: [{
						data: seriesData
					}],
					legend: {
						data: legenData //显示图标题
					}

				}
				this.chartInstance.setOption(dataOption)

			},
			screenAdapter() { //屏幕适配  当浏览器发生变化时 图表也随之改变
				this.titleFontSize = this.$refs.hot_ref.offsetWidth / 100 * 2.6

				const adapterOption = { //屏幕适配相关的一些配置
					title: {
						textStyle: {
							fontSize: this.titleFontSize
						}
					},
					series: [{
						radius: this.titleFontSize * 6.5,
						center: ['50%', '50%']
					}],
					legend: {
						itemWidth: this.titleFontSize / 2,
						itemHeight: this.titleFontSize / 2,
						itemGap: this.titleFontSize / 2,
						textStyle: {
							fontSize: this.titleFontSize / 2
						}
					}

				}
				this.chartInstance.setOption(adapterOption)

				//手动调用图表对象的resize  才能产生效果
				this.chartInstance.resize()
			},
			leftPie() { //点击左箭头切换图
				this.currentIndex--
				if (this.currentIndex < 0) {
					this.currentIndex = this.allData.length - 1
				}
				this.updateChart()
			},
			rightPie() { //点击右箭头切换图
				this.currentIndex++
				if (this.currentIndex > this.allData.length - 1) {
					this.currentIndex = 0
				}
				this.updateChart()
			}

		}
	}
</script>

<style scoped="scoped">
	.left {
		position: absolute;
		left: 20%;
		top: 50%;
		transform: translateY(-50%);
		cursor: pointer;
		color: wheat;
	}

	.right {
		position: absolute;
		right: 20%;
		top: 50%;
		transform: translateY(-50%);
		cursor: pointer;
		color: wheat;
	}

	.name {
		position: absolute;
		left: 80%;
		bottom: 40px;
		color: wheat;
	}
</style>
